<template>
    <div>
        <div class="container" v-loading="loading">
            <div id="myChart"></div>
            <div id="myChart1"></div>
            <div id="myChart2"></div>
            <div id="myChart3"></div>
        </div>
    </div>
</template>

<script>
    //引入基本模板
    let echarts = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    require('echarts/lib/component/toolbox');
    require('echarts/lib/component/grid');
    require('echarts/lib/component/legend');
    //引入折线图和饼图
    require('echarts/lib/chart/line');
    require('echarts/lib/chart/pie');
    export default {
        data() {
            return {
                depname:[],
                loading: false,
                information:[],
                department:[],
                dep:[],
                salary:[],
                p:[],
                psvg:[],
                svg:[],
                xuelidata:[],
                dataman:[],
                datawoman:[]
            }
        },
        mounted(){
                this.getAlldepartment();
                this.getAllinformation();
                this.getAllsalary();
                this.drawLine();
        },
        watch:{
            depname(val){//监听数据发生改变 刷新图表数据
                this.drawLine();
            }
        },
        methods: {      
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'));
                let myChart1 = echarts.init(document.getElementById('myChart1'));
                let myChart2 = echarts.init(document.getElementById('myChart2'));
                let myChart3 = echarts.init(document.getElementById('myChart3'));
                let legend=this.depname.map(item=>item);  
                // 绘制图表
                myChart.setOption({
                    title: { text: '各部门平均薪资柱形图',left: 'center' },
                    tooltip: {},
                    xAxis: {
                        data: legend
                    },
                    grid:{
                        height:210
                    },
                    legend: {
                        data: ['平均薪资'],
                        top: '7%',
                        left: 'center'
                    },
                    yAxis: {
                        type:'value'
                    },
                    color:['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3'],
                });
                myChart1.setOption({
                    title: {
                        text: '各部门男女趋势图',
                        left: 'center'
                    },
                    color:['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['男', '女'],
                        top: '10%'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: legend
                    },
                    yAxis: {
                        type: 'value'
                    },
                });
                myChart2.setOption({
                    title: {
                        text: '各部门人数饼状图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    color:['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3','#e01f54'],
                });
                myChart3.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    title: {
                        text: '员工学历环形图',
                        left: 'center'
                    },
                    legend: {
                        top: '7%',
                        left: 'center'
                    },
                    color:['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3'],
                });
            },
            async getAlldepartment(){
                this.$http.get("https://7d5184241f35.ngrok.io/api/getAlldepartment").then((response)=>{
                    if(response.data.length!=0){
                        for(var i=0;i<response.data.length;i++){
                        this.depname.push(response.data[i].dname);                  
                        }
                    }else{
                         this.$message.error('获取数据失败！');
                    }
                })
            },
            async getAllinformation(){
                this.$http.get("https://7d5184241f35.ngrok.io/api/getAllinformation").then((response)=>{
                    if(response.data.length!=0){
                        let degree=[];
                        this.information=response.data;
                        //求有什么学历，每种学历多少人
                        for(var i=0;i<this.information.length;i++){
                            let degreename=this.information[i].idegree;
                            if(degree.degreename){
                                degree.degreename.childs.push(this.information[i]);
                            }else{
                                let obj={
                                    degreename:degreename,
                                    childs:[this.information[i]]
                                }
                                degree.push(obj);
                            }
                            //求各部门男女人数和总人数
                            for(var j=0;j<this.depname.length;j++){
                                let label=this.depname[j];
                                if(this.information[i].idname==label){
                                    if(this.department.label){
                                        this.department.label.childs.push(this.information[i]);
                                    }else{
                                        let obj={
                                            dname:label,
                                            childs:[this.information[i]]
                                        }
                                        this.department.push(obj);
                                    }
                                }
                            }
                        }
                        
                        //学历
                        for(var s=0;s<degree.length;s++){
                            let obj={
                                value:degree[s].childs.length,
                                name:degree[s].degreename
                            }
                            this.xuelidata.push(obj);
                        }
                        let option3={
                            series: [
                                {
                                    name: '学历人数',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '20',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: this.xuelidata
                                }
                            ]
                        }
                        echarts.init(document.getElementById('myChart3')).setOption(option3);
                        let people=[];
                        let depname=[];
                        var n=0;
                        let m=[];
                        let z=[];
                        let zn=0;
                        for(var i=0;i<this.depname.length;i++){    
                            if(this.department[i]==undefined){
                                if(depname[n]==this.depname[i]){
                                    z.push(i);
                                    people.push(this.department[m[n]].childs.length);
                                    n++;
                                    if(depname[n]==undefined){
                                        n=0;
                                        depname=[];
                                        m=[];
                                    }
                                }else{
                                    people.push(0);
                                }
                            }else{
                                depname.push(this.department[i].dname);
                                m.push(i);
                                if(depname[n]==this.depname[i]){
                                    z.push(i);
                                    people.push(this.department[m[n]].childs.length);
                                    n++;
                                    if(depname[n]==undefined){
                                        n=0;
                                        depname=[];
                                        m=[];
                                    }
                                }else{
                                    people.push(0);
                                }
                            }           
                        }
                        //各部门男女人数
                        for(var l=0;l<people.length;l++){
                            let man=0;
                            let woman=0;
                            if(people[l]>0){
                                for(var j=0;j<this.department[zn].childs.length;j++){
                                    if(this.department[zn].childs[j].isex=="男"){
                                        man++;
                                    }else if(this.department[zn].childs[j].isex=="女"){
                                        woman++;
                                    }
                                }
                                zn++;
                                if(z[zn]==undefined){
                                    zn=0;
                                    z=[];
                                }
                            }
       
                            this.dataman.push(man);
                            this.datawoman.push(woman);
                            this.psvg=people;
                        }
                        let option1={
                            series: [
                                {
                                    name: '男',
                                    type: 'line',
                                    stack: '人数',
                                    data: this.dataman
                                },
                                {
                                    name: '女',
                                    type: 'line',
                                    stack: '人数',
                                    data: this.datawoman
                                }
                            ]
                        }
                        echarts.init(document.getElementById('myChart1')).setOption(option1);
                        for(var i=0;i<people.length;i++){
                            let obj={
                                value:people[i],
                                name:this.depname[i]
                            }
                            this.p.push(obj);
                        }                        
                        let option2={
                            series: [
                                {
                                    name: '总人数',
                                    type: 'pie',
                                    radius: '50%',
                                    data: this.p,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                        echarts.init(document.getElementById('myChart2')).setOption(option2);
                    }else{
                    this.$message.error('获取数据失败！');
                    }
                })
            },
            async getAllsalary(){
                this.$http.get("https://7d5184241f35.ngrok.io/api/getAllsalary").then((response)=>{
                    if(response.data.length!=0){
                    let salary=response.data; 
                    let moneydata=[];
                    for(var j=0;j<this.depname.length;j++){
                        let label=this.depname[j];
                        for(var i=0;i<salary.length;i++){
                            if(salary[i].sdname==label){
                                if(this.salary.label){
                                    this.salary.label.childs.push(salary[i]);
                                }else{
                                    let obj={
                                        dname:label,
                                        childs:[salary[i]]
                                    }
                                    this.salary.push(obj);
                                }
                            }
                        }
                        console.log(this.salary);
                    }
                    let money=0;
                    let svg=0;
                        for(var i=0;i<this.depname.length;i++){
                            let label=this.depname[i];
                            for(var j=0;j<this.salary.length;j++){
                                if(this.salary[j].dname==label){
                                    for(var k=0;k<this.salary[j].childs.length;k++){
                                        money+=this.salary[j].childs[k].ssalary;
                                    }
                                    svg=money/this.salary[j].childs.length;
                                    moneydata.push(svg);
                                    money=0;
                                    svg=0;
                                }
                            }
                        }
                        console.log(moneydata);
                        let f=0;
                        for(var n=0;n<this.psvg.length;n++){
                            if(this.psvg[n]>0){
                                this.svg.push(moneydata[f]);
                                f++;
                                if(moneydata[f]==undefined){
                                    f=0;
                                }
                            }else{
                                this.svg.push(0);
                            }
                        }
                        console.log(this.svg);
                        let option={
                            series: [{
                                name: '平均薪资',
                                type: 'bar',
                                data: this.svg
                            }]
                        }
                        echarts.init(document.getElementById('myChart')).setOption(option);
                    }else{
                    this.$message.error('获取数据失败！');
                    }
                })
            },
        }
    }
</script>

<style scoped>
.container{
  text-align: center;
}
.container> div {
    width: 550px;
    height: 300px;
    display: inline-block;
    margin: 10px;
}
</style>
